<template>
	<div id="app">
		<router-view/>
	</div>
</template>

<script>
	import _sessionUser from '@/util/SessionUser';
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import _userService from '@/service/userService';
	import _categoryService from '@/service/categoryService';

	export default {
		name: 'App',
		data() {
			return {

			}
		},
		async created() {
			let vm = this;
			let token = JSON.parse(sessionStorage.getItem('token'));
			let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
			if(token && userInfo) {
				vm.SET_USER_TOKEN({
					token: token
				});
				vm.SAVE_USER_INFO({
					userInfo: userInfo
				});
				// 刷新浏览器，及时更新用户的socketId
				vm.$socket.emit('login', {
					userId: vm.userInfo.id
				});
				_sessionUser.ajax_common_header(vm);
				vm.getCategory();
			} else {
				if(vm.$router.history.current.path !== '/signIn') {
					vm.$router.push('signIn');
					vm.$toast({
						message: '用户登录信息过期',
						duration: 2000
					});
				}
			}
		},
		computed: {
			...mapState({
				token: state => state.user.token,
				userInfo: state => state.user.userInfo,
				categoryList: state => state.liveCategory.categoryList
			})
		},
		methods: {
			...mapMutations([
				'SET_USER_TOKEN',
				'SAVE_USER_INFO',
				'SAVE_USER_SIGNIN',
				'SAVE_LIVE_CATEGORY'
			]),
			// 获取直播分类
			getCategory(param) {
				let vm = this
				let resultData
				let data
				let res = _categoryService.getCategory({
					'id': param && param.id,
					'name': param && param.name,
					'parentId': param && param.parentId,
					'success': function(response) {
						resultData = response.data;
						data = response.data.data;
						if(resultData.success) {
							vm.SAVE_LIVE_CATEGORY({
								categoryList: data
							});
						}
						console.log('获取直播分类：' + resultData.message);
					}
				})
				return res
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	#app {
		position: relative;
		width: 100%;
		height: 100%;
		max-width: 800px;
		overflow-x: hidden;
		margin: 0 auto;
	}
	
	html {
		font-size: 10px
	}
	
	@media screen and (min-width:321px) and (max-width:375px) {
		html {
			font-size: 11px
		}
	}
	
	@media screen and (min-width:376px) and (max-width:414px) {
		html {
			font-size: 12px
		}
	}
	
	@media screen and (min-width:415px) and (max-width:639px) {
		html {
			font-size: 15px
		}
	}
	
	@media screen and (min-width:640px) and (max-width:719px) {
		html {
			font-size: 20px
		}
	}
	
	@media screen and (min-width:720px) and (max-width:749px) {
		html {
			font-size: 22.5px
		}
	}
	
	@media screen and (min-width:750px) and (max-width:799px) {
		html {
			font-size: 23.5px
		}
	}
	
	@media screen and (min-width:800px) {
		html {
			font-size: 25px
		}
	}
</style>